<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/video-publish.css}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/examples/css/style.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/css/editormd.css}" />

  <title>语海社区 - 视频上传</title>

</head>
<body>

<!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">视频上传</a>
  </nav>

  <!-- Main Content -->
  <div class="container">

    <form id="upload-form" enctype="multipart/form-data">
      <div class="form-group">
        <header>
          <div class="form-group mt-5">
            <input type="text" class="form-control form-control-lg font-weight-bold"
                   id="recipient-name" th:name="title" placeholder="给视频写个标题..." required>
          </div>
        </header>
        <label for="video-file">选择一个视频上传</label>
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="video-file" name="video-file" accept="video/*" onchange="updateFileName(this);">
          <label class="custom-file-label" for="video-file">选择文件</label>
        </div>
      </div>
      <button type="button" class="btn btn-primary" id="backIndexBtn">
        <i class="bi bi-house-door"></i> 返回首页
      </button>
      <label for="section">选择发布的板块：</label>
      <select id="section" name="section">
        <option th:each="section:${sections}" th:value="${section.id}" th:text="${section.name}"></option>
      </select>
      <button type="button" class="btn btn-primary" id="publishBtn">
        发布视频<i class="bi bi-cloud-upload me-2"></i>
      </button>
    </form>


    <div id="preview-container" class="d-none">
      <h5>预览:</h5>
      <hr>
      <div class="video-wrapper">
        <video id="preview-video" class="preview-video" controls></video>
      </div>
    </div>
  </div>


  <!-- 提示框 -->
  <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="hintModalLabel">提示</h5>
        </div>
        <div class="modal-body" id="hintBody"></div>
      </div>
    </div>
  </div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/editor-md/editormd.min.js}"></script>

<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/video-publish.js}"></script>

<!-- 自定义js-->

</body>
</html>
